<template>
    <div class="msgBox left fadeInLeft">
        <img src="../assets/img/avatar-left.jpg" alt="">
        <p class="msg">{{chatItemObj.msg}}</p>
    </div>
</template>
<script>
    export default {
        props:{
            chatItemObj:{
                type:Object,
                required:true,
                default:function () {
                    return {}
                }
            }
        }
    }
</script>
<style>
    .msgBox > *{
        display: inline-block;
    }
    .msgBox img{
        margin-right: 1rem;
        width: 3rem;
        border-radius: 50%;
    }
    .msgBox p{
        padding: .5rem 1rem;
        vertical-align: top;
        background: white;
        border-radius: 1rem;
    }
</style>